<template>
    <div class="app-container" v-loading="loading">
        <levelbar></levelbar>
        <el-form label-width="90px" class="form-box" 
        :rules="rules" :model="ruleForm" 
        ref="ruleForm">
            <div class="box">
                <div class="tea-infor">
                    <div class="form-title">教师信息</div>
                    <div class="form-item">
                         <div class="form-item-title">
                            <span class="title-level">基础信息</span>
                        </div>
                        <div class="form-content">
                            <el-row :gutter="20">
                                <el-col :span="9">
                                    <el-form-item label="姓名" prop="name">
                                        <el-popover placement="top-start" trigger="click"
                                            content="字符长度不大于12个">
                                            <el-input v-model="ruleForm.name" slot="reference" :maxlength="12"  placeholder="请输入姓名"></el-input>
                                        </el-popover>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9" :offset="5">
                                    <el-form-item label="性别" >
                                        <el-radio-group v-model="ruleForm.sex">
                                            <el-radio label="0">男</el-radio>
                                            <el-radio label="1">女</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="9">
                                    <el-form-item label="证件类型">
                                        <el-select v-model="ruleForm.cardType" placeholder="请选择" style="width:100%;" >
                                            <el-option v-for="(item,index) in formInline.cardTypeArr" :key="index" :label="item.sName" :value="item.pId"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9" :offset="5">
                                    <el-form-item label="证件号" prop="cardNum">
                                        <el-popover placement="top-start" trigger="focus"
                                            content="字符长度不大于18个">
                                            <el-input v-model="ruleForm.cardNum" placeholder="请输入证件号" slot="reference" :maxlength="18"></el-input>
                                        </el-popover>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="9">
                                    <el-form-item label="出生日期">
                                        <el-date-picker v-model="ruleForm.birthday" :editable="false"
                                        :picker-options="pickerOptions0" type="date" placeholder="请输入出生日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9" :offset="5">
                                    <el-form-item label="婚姻状况">
                                        <el-select v-model="ruleForm.marry" placeholder="请选择" style="width:100%;">
                                            <el-option v-for="(item,index) in formInline.marryArr" :key="index" :label="item.marryName" :value="item.marryId"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="9">
                                    <el-form-item label="手机号码">
                                         <span>{{ruleForm.phone}}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="9">
                                    <el-form-item label="所在地区" prop="fProvinceId">
                                        <province v-model="ruleForm.fProvinceId" @getProvinceName='getProvinceName'></province>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="9" >
                                    <el-form-item prop="fCity">
                                        <city v-model="ruleForm.fCity" :province="ruleForm.fProvinceId" @getCityName='getCityName'></city>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                             <el-row :gutter="20">
                               <el-col :span="9" >
                                    <el-form-item prop="fArea">
                                        <region v-model="ruleForm.fArea" :city="ruleForm.fCity" @getAreaName='getAreaName'></region>
                                    </el-form-item>
                                 </el-col>
                            </el-row>
                         </div>
                    </div>
                </div>
                <div class="form-item">
                     <div class="form-item-title">
                        <span class="title-level">入职信息</span>
                     </div>
                      <div class="form-content">
                        <el-row :gutter="20">
                            <el-col :span="9">
                                <el-form-item label="教职工号" prop="workNum">
                                    <el-popover placement="top-start" trigger="focus"
                                          content="字符长度18位">
                                         <el-input v-model="ruleForm.workNum" placeholder="职工号" :maxlength="18" slot="reference"></el-input>
                                    </el-popover>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9" :offset="5">
                                <el-form-item label="职称" prop="workCall" label-width="80px">
                                    <el-select v-model="ruleForm.workCall" placeholder="请选择" style="width:100%;">
                                        <el-option v-for="(item,index) in formInline.workCallArr" :key="index" :label="item.sName" :value="item.pId"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                     </div>
                </div>
                  <div class="form-item">
                        <div class="form-item-title">
                        <span class="title-level">其他信息</span>
                         </div>
                      <div class="form-content">
                            <el-row :gutter="20">
                                <el-col :span="9">
                                    <el-form-item label="教龄" prop="workYear" >
                                         <el-popover placement="top-start" trigger="focus"
                                          content="字符长度不大于2位">
                                            <el-input v-model="ruleForm.workYear" placeholder="请输入教龄" :maxlength="2" slot="reference"></el-input>
                                        </el-popover>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9" :offset="5">
                                    <el-form-item label="教师资格证" prop="teachCard" >
                                        <el-select v-model="ruleForm.teachCard" placeholder="请选择" style="width:100%;">
                                            <el-option v-for="(item,index) in formInline.teachCardArr" :key="index" :label="item.teachCardName" :value="item.teachCardId"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                
                                <el-col :span="9" >
                                    <el-form-item label="证书号码" prop="teachCardNum" :maxlength="18">
                                        <el-popover placement="top-start" trigger="focus"
                                          content="字符长度18位">
                                            <el-input v-model="ruleForm.teachCardNum" placeholder="请输入证书号码" :maxlength="18" slot="reference"></el-input>
                                        </el-popover>
                                    </el-form-item>
                                </el-col>
                                 <el-col :span="9" :offset="5">
                                    <el-form-item label="邮箱" prop="email" >
                                        <el-popover placement="top-start" trigger="focus" content="字符长度不大于32位">
                                            <el-input v-model="ruleForm.email" placeholder="请输入邮箱" :maxlength="32"  slot="reference"></el-input>
                                        </el-popover>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="9" >
                                    <el-form-item label="详细地址" prop="address">
                                          <el-popover placement="top-start" trigger="focus"
                                          content="字符长度30位">
                                             <el-input v-model="ruleForm.address" placeholder="请输入详细地址" :maxlength="30" slot="reference"></el-input>
                                        </el-popover>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                     </div>
                    </div>
                    <div class="form-item">
                    <el-row>
                        <el-col :span="24">
                            <div class="footer">
                             <el-button @click="resetForm('ruleForm')">取消</el-button>
                            <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
             
            </div>
        </el-form>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import moment from 'moment';
import { mapGetters } from 'vuex';
import { getTeacherDetail, queryWorkCall, saveChangeInfor, cardType} from 'api/teacherManage';
// import {querySchoolByName} from 'api/common';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import school from 'components/SchoolClasss/school';
export default {
    name: 'correct',
    components: { Levelbar, province, city, region, school},
    data() {
        return {
            loading: false,
            backfill: false, // 不是回填
            schoolLoading: false,
            addTeachList: [],
            currIndex: 0,
            arrRemoteMethod: [],
            isHavDoneAddBtn: false, // 是否按过继续添加按钮的状态值 默认 没有
            formInline: {
                workCallArr: [], // 职称列表
                cardTypeArr: [], // 证件类型
                teachCardArr: [ // 资格证书
                    { teachCardName: '请选择', teachCardId: ''}, 
                    { teachCardName: '有', teachCardId: '1' },
                    { teachCardName: '无', teachCardId: '0' }
                ],
                marryArr: [// 婚姻状况
                   { marryName: '请选择', marryId: '' },
                    { marryName: '未婚', marryId: '0' },
                    { marryName: '已婚', marryId: '1' },
                    { marryName: '离异', marryId: '2' }
                ]
                 
            },
            teacherInforList: {},
            schoolNameList: [], // 学校名称列表
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e7;
                }
            },
            // 记录是否有回填的省市区
            // areaList: {
            //     provinceId: '',
            //     areaId: '',
            //     cityId: ''
            // },
            ruleForm: {
                // 基础信息栏
                name: '',
                sex: '0',
                cardType: '', // 证件类型
                cardNum: '', // 证件号
                birthday: '', 
                marry: '',
                phone: '',
                fProvinceId: '',
                fCity: '',
                fArea: '',
                // 任教班级栏
                // 入职信息栏目
                workNum: '', // 职工号
                workCall: '', // 职称
                // 其他信息
                workYear: '',
                teachCard: '', // 教师资格证 0：没有 1：有
                teachCardNum: '', // 证书号码
                email: '',
                address: '',
                addLenList: [],
                provinceName: '', // 省的名字
                cityName: '', // 市的名字
                areaName: '' // 区的名字
            },
            teacherInfor: {}, // 整页的教师信息
            rules: {
                name: [
                    { required: true, message: '请输入姓名'},
                     { pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur' }
                ],
                workYear: [
                    { pattern: /^\d+$/, message: '教龄必须为数字值'}
                ],
                email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}],
                cardNum: [// 证件号
                    {pattern: /^[0-9a-zA-Z]+$/, message: '请输入正确的证件号'}
                ],
                workNum: [// 教职工号
                    {pattern: /^[0-9a-zA-Z]+$/, message: '请输入正确的教职工号'}
                ],
                teachCardNum: [// 教师资格证书
                    {pattern: /^[0-9a-zA-Z]+$/, message: '请输入正确的证书号码'} 
                ],
                fProvinceId: [
                     { required: true, message: '请输入省份'}
                ],
                fCity: [
                     { required: true, message: '请输入城市'}
                ],
                fArea: [
                     { required: true, message: '请输入区县'}
                ]
            }
        }
    },
    created() {
        this.getTeacherDetails(this.$route.params.teacherId);// 查询教师信息
        this.getWorkCall();// 查询职称
        this.getCardType();// 证件类型
    },
    computed: {
        ...mapGetters([
            'uid'
        ])
    },
    methods: {
        getProvinceName(provinceName) {// 获取省市区的名字
            this.ruleForm.provinceName=provinceName;
        },
        getCityName(cityName) {
            this.ruleForm.cityName=cityName;
        },
        getAreaName(areaName) {
            this.ruleForm.areaName=areaName;
        },
    
        // 查询教师信息
        getTeacherDetails(teacherId) {
            this.loading=true;
            getTeacherDetail(teacherId).then(res => {
                this.loading=false;
                this.teacherInforList = res.data.content;// 整个页面的（该教师信息）
                let teacherInfor = res.data.content;
                 // 查询教师信息
                this.backBaseInfor(teacherInfor);
                this.backJobInfor(teacherInfor) ; // 入职信息栏目 其他信息栏目
            }).catch(() => {
                this.loading=false;
            });
        },
        // 确定按钮  保存修改教师信息
        checkArea() {
            if (this.ruleForm.cardType==''&&this.ruleForm.cardNum) {
                this.$message.info('请选择证件类型')
                return false
            } else if (this.ruleForm.cardType&&!this.ruleForm.cardNum) {
                this.$message.info('请输入证件号')
                return false
            } else {
                return true;
            }
        },
        correctTeaInfor() {
            this.loading=true;
            let teacherId = this.$route.params.teacherId;
            let name = this.ruleForm.name;
            let sex = this.ruleForm.sex;
            let certificateType = this.ruleForm.cardType;// 证件类型
            let certificateNumber = this.ruleForm.cardNum;// 证件号
            let birth = this.ruleForm.birthday ? moment(this.ruleForm.birthday).format('YYYY-MM-DD') : '';
            let maritalStatus = this.ruleForm.marry;
            let phone = this.ruleForm.phone;
            let provinceId = this.ruleForm.fProvinceId;
            let cityId = this.ruleForm.fCity;
            let areaId = this.ruleForm.fArea;
            // 入职信息栏目
            let jobNumber = this.ruleForm.workNum;// 教职工号
            let professional = this.ruleForm.workCall;// 职称
            let teachAge = this.ruleForm.workYear;// 教龄
            let certification = this.ruleForm.teachCard;// 资格证书
            let certificationNumber = this.ruleForm.teachCardNum;// 证书号码
            let email = this.ruleForm.email;
            let address = this.ruleForm.address;
            let lists=[];
            let provinceName=this.ruleForm.provinceName;
            let cityName=this.ruleForm.cityName;
            let areaName=this.ruleForm.areaName;
            saveChangeInfor(
                teacherId,
                name,
                sex,
                certificateType,
                certificateNumber,
                birth,
                maritalStatus,
                phone,
                provinceId,
                cityId,
                areaId,
                jobNumber,
                professional,
                teachAge,
                certification,
                certificationNumber,
                email,
                address,
                lists,
                provinceName,
                cityName,
                areaName
            ).then(res => {
                this.loading=false;
                this.$store.dispatch('UpdateCache', true);// 列表刷新
                this.$message.success('修改成功!');
                this.$router.push({path: '/teacherManage'});
            }).catch(res => {
                this.loading=false;
            });
        },
         // 查询老师 职称
        getWorkCall() {
            queryWorkCall().then(res => {
                this.formInline.workCallArr = res.data.content;
                this.formInline.workCallArr.unshift({sName: '请选择', pId: ''});
            })
        },
        // 证件类型
        getCardType() {
            cardType().then(res => {
                this.formInline.cardTypeArr = res.data.content;
                this.formInline.cardTypeArr.unshift({sName: '请选择', pId: ''});
            });
        },
      
        submitForm(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.checkArea();
                    if (this.checkArea()==true) {
                        this.$confirm('确定要提交吗?', ' ', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消'
                        }).then(() => {
                            this.correctTeaInfor();
                        });
                    }
                } else {
                    return false;
                }
            });
        },
        
       
          // 查询教师信息
        // 基础信息
        backBaseInfor(teacherInfor) {
            this.ruleForm.name = teacherInfor.name;
            this.ruleForm.sex = teacherInfor.sex;
            this.ruleForm.cardType = teacherInfor.certificateType===null?'':teacherInfor.certificateType;// 证件类型
            this.ruleForm.cardNum = teacherInfor.certificateNumber;// 证件号
            this.ruleForm.birthday = teacherInfor.birth;
            this.ruleForm.marry = teacherInfor.maritalStatus===null?'':teacherInfor.maritalStatus;
            this.ruleForm.phone = teacherInfor.phone;
            this.ruleForm.fProvinceId = teacherInfor.provinceId===null ? '' : teacherInfor.provinceId;// 如果查询的信息有返回省，就填充，不然不change
            this.ruleForm.fCity = teacherInfor.cityId===null? '':teacherInfor.cityId;
            this.ruleForm.fArea = teacherInfor.areaId===null? '':teacherInfor.areaId;
        },
       
         // 入职信息栏目 其他信息栏目
        backJobInfor(teacherInfor) {
                // 入职信息栏目
            this.ruleForm.workNum = teacherInfor.jobNumber===null?'':teacherInfor.jobNumber;// 教职工号
            this.ruleForm.workCall = teacherInfor.professional===null?'':teacherInfor.professional;// 职称
                // 其他信息
            this.ruleForm.workYear=teacherInfor.teachAge? parseInt(teacherInfor.teachAge):'';//
            this.ruleForm.teachCard = teacherInfor.certification===null?'':teacherInfor.certification;// 教师资格证
            this.ruleForm.teachCardNum = teacherInfor.certificationNumber===null?'':teacherInfor.certificationNumber;// 证书号码
            this.ruleForm.email = teacherInfor.email===null?'': teacherInfor.email;
            this.ruleForm.address = teacherInfor.address===null?'':teacherInfor.address;
        },
        // 重置
        resetForm(dataForm) {
            this.$router.push({path: '/teacherManage'});
        }
    }
}
</script>

<style lang="scss" scoped>
$bgcolor: #fff;
.add-message-box{
    padding-bottom: 20px;
    margin-left:38px;
   .addMessage{
        color:#ff5e2c;
        font-size:14px;
        cursor: pointer;
        i{
        font-size:10px; 
        }
  }
}
 @mixin showTitle() {
            background: $bgcolor;
           box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        }
.form-box {
        padding: 0px 50px 0;
        @include showTitle();
        .form-item {
        padding-bottom: 40px;
        }
        .form-title {
           padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
}
.el-date-editor.el-input {
    width: 100% !important;
}
 
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .el-form {
        .form-item-title {
            margin: 40px 0;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            border-left: 4px solid #ff5e2c;
            text-indent: 16px;
        }
        .box {
            padding-bottom: 10px;
            background: #fff;
        }
        .el-tag {
            margin-left: 10px;
            background: #f9f9f9;
            color: #444;
        }
        .footer {
            text-align: center;
            margin-top: 40px;
        }
    }
    .form-box {
    padding: 0 50px;
    @include showTitle();
    }
    .delBtn {
        display: inline-block;
        height: 36px;
        width: 16px;
        line-height: 36px;
        i {
            cursor: pointer;
        }
    }
 
}
</style>
